<template>
  <view class="main-container">
    <h3>用户登录</h3>
    <form @submit="loginBtn" @reset="resetBtn">
      <view class="uni-form-item" style="display: flex; align-items: center;gap: 20px">
        <view class="title">用户名</view>
        <input v-model="userInfo.userName" name="userName" placeholder="请输入用户名"/>
      </view>
      <view class="uni-form-item" style="display: flex; align-items: center;gap: 20px">
        <view class="title">密码</view>
        <input v-model="userInfo.password" name="password" placeholder="请输入密码"/>
      </view>
      <view style="margin-top: 20px; display: flex">
        <button form-type="submit" type="primary" plain="true">提交</button>
        <button form-type="reset" type="warn" plain="true">重置</button>
        <button type="default" plain="true">注册</button>
      </view>
    </form>
  </view>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";

onMounted(() => {
  console.log("登陆页面被加载了呢")
})

const loginInfo = {
  userName: "",
  password: "",
}

const userInfo = ref(loginInfo)

const loginBtn = () => {
  console.log("用户输入的姓名 ===", userInfo.value.userName);
  console.log("用户输入的密码 ===", userInfo.value.password);
}

const resetBtn = () => {
  console.log('userInfo===', userInfo);
  userInfo.value = {
    userName: '',
    password: ''
  }
}
</script>

<style>

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  //justify-content: center;
}

.content {
  margin: 200rpx auto 50rpx auto;
}

.uni-form-item .title {
  padding: 20rpx 0;
}

</style>
